<template>
  <div class="source base-section">
    <!-- 标题 -->
    <div class="base-section__header">
      <h3 class="base-section__header-title">{{$t('dataAnalysis.dealTrans')}}</h3>
    </div>
    <!-- 标题 -->

    <!-- 多项选择 -->
    <div class="checkbox base-section">
      <el-form :model="form" class="form-inline">
        <div class="checkbox-wrapper">
          <div class="checkbox-group">
            <div class="checkbox-group__title">{{$t('dataAnalysis.pageBrowsing')}}</div>
            <div class="checkbox-group__content">
              <el-checkbox-group v-model="form.saleIndex">
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.perVisitor')" checked></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.newVisitor')" checked></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="checkbox-group">
            <div class="checkbox-group__title">{{$t('dataAnalysis.dealTrans')}}</div>
            <div class="checkbox-group__content">
              <el-checkbox-group v-model="form.serviceIndex">
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.uvPrice')"></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.addCartNumbers')"></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.paidPeoples')"></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.paidAmount')" checked></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.visitOrder')"></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.paidNumbers')"></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.paymentAmount')" checked></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.vToP')"></el-checkbox>
                <el-checkbox class="checkbox-item" name="saleIndex" :label="$t('dataAnalysis.customerUnitPrice')"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </el-form>
      <div class="limit-num" :class="{'out-limit': outLimit}">
        <span id="maxSelectSpan">{{$t('dataAnalysis.upTo5')}}</span>
        {{$t('dataAnalysis.selected')}}
        <span class="item-num">{{selectNum}}</span>/{{$t('dataAnalysis.fiveItems')}}
      </div>
    </div>
    <!-- /多项选择 -->

    <!-- 选择展示不同端数据 (没有区分来源类型,先不做) -->
    <!--    <div class="plat">-->
    <!--      <el-radio-group v-model="platValue" size="small">-->
    <!--        <el-radio-button label="H5"></el-radio-button>-->
    <!--        <el-radio-button label="小程序"></el-radio-button>-->
    <!--      </el-radio-group>-->
    <!--    </div>-->
    <!-- /选择展示不同端数据 -->

    <!--告示-->
    <div class="notice">
      <p>{{$t('dataAnalysis.notice1')}}</p>{{$t('dataAnalysis.notice2')}}
    </div>
    <!--告示-->

    <!-- 表格 -->
    <div class="table">
      <el-table :data="tableData">
        <el-table-column prop="prodInfo" :label="$t('dataAnalysis.sourceType')" fixed="left"></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible1"
          class="table-item"
          prop="userNumsRatio"
          :label="$t('dataAnalysis.perVisitor')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible2"
          class="table-item"
          prop="userNums"
          :label="$t('dataAnalysis.newVisitor')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible3"
          class="table-item"
          prop="uvprice"
          :label="$t('dataAnalysis.uvPrice')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible4"
          class="table-item"
          prop="plusShopCartUser"
          :label="$t('dataAnalysis.addCartNumbers')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible5"
          class="table-item"
          prop="placeOrderUser"
          :label="$t('dataAnalysis.paidPeoples')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible6"
          class="table-item"
          prop="placeOrderAmount"
          :label="$t('dataAnalysis.paidAmount')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible7"
          class="table-item"
          prop="placeOrderRate"
          :label="$t('dataAnalysis.visitOrder')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible8"
          class="table-item"
          prop="payUser"
          :label="$t('dataAnalysis.paidNumbers')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible9"
          class="table-item"
          prop="payAmount"
          :label="$t('dataAnalysis.paymentAmount')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible10"
          class="table-item"
          prop="payRate"
          :label="$t('dataAnalysis.vToP')"
          sortable
        ></el-table-column>
        <el-table-column
          v-if="tableItemShow.isVisible11"
          class="table-item"
          prop="customerPrice"
          :label="$t('dataAnalysis.customerUnitPrice')"
          sortable
        ></el-table-column>
        <!--        <el-table-column prop="edit" fixed="right" label="操作"></el-table-column>-->
      </el-table>
    </div>
    <!-- /表格 -->
  </div>
</template>


<script>
export default {
  data () {
    return {
      platValue: 'H5', // 选择不同端
      outLimit: false, // 判断是否选中数量超过限制数量
      form: {
        saleIndex: [], // 游览访问
        serviceIndex: [] // 成交转化
      },
      tableData: [],
      systemTypeName: [this.$i18n.t('date.a'), 'PC', 'H5', this.$i18n.t('sysManagement.miniPrograms'), this.$i18n.t('dataAnalysis.android'), 'IOS'], // 0 1 2 3 4 5
      timeType: this.$parent.timeType,
      startTime: this.$parent.startTime,
      selectNum: 0, // 选择指标的数量s
      sumData: [], // 所有指标
      tableItemShow: {
        isVisible1: false,
        isVisible2: false,
        isVisible3: false,
        isVisible4: false,
        isVisible5: false,
        isVisible6: false,
        isVisible7: false,
        isVisible8: false,
        isVisible9: false,
        isVisible10: false,
        isVisible11: false,
        isVisible12: false
      }
    }
  },
  mounted () {
    this.getFlowSour()
  },
  // watch: {
  //   startTime (val) {
  //     this.updateTimeName()
  //     this.getAnalysisData()
  //   }
  // },
  methods: {
    getFlowSour () {
      // console.log('第三部分发送请求')
      this.$http({
        url: this.$http.adornUrl('/platform/flowAnalysis/flowSour'),
        method: 'get',
        params: this.$http.adornParams({
          start: !this.startTime ? null : this.startTime,
          timeType: this.timeType
        })
      }).then(({ data }) => {
        if (data) {
          var name = null
          this.tableData = []
          for (let i = 0; i < data.length; i++) {
            name = this.systemTypeName[data[i].systemType]
            data[i].prodInfo = name
            data[i].userNumsRatio = (data[i].userNumsRatio * 100).toFixed(2) + '%'
            data[i].placeOrderRate = (data[i].placeOrderRate * 100).toFixed(2) + '%'
            data[i].payRate = (data[i].payRate * 100).toFixed(2) + '%'
            this.tableData.push(data[i])
          }
        }
      })
    },
    /**
     * 文字效果
     */
    textShare (div, color) {
      // 文字跳动
      // var timer = null
      // var i = 0
      // clearInterval(timer)
      // timer = setInterval(function () {
      //   div.style.display = i++ % 2 ? 'none' : 'block'
      //   i > 6 && (clearInterval(timer))
      // }, 80)
      div.style.color = color
    },
    /**
     * 控制表格列显隐
     */
    changVisibles () {
      this.tableItemShow.isVisible1 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.perVisitor'))
      this.tableItemShow.isVisible2 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.newVisitor'))
      this.tableItemShow.isVisible3 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.uvPrice'))
      this.tableItemShow.isVisible4 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.addCartNumbers'))
      this.tableItemShow.isVisible5 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.paidPeoples'))
      this.tableItemShow.isVisible6 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.paidAmount'))
      this.tableItemShow.isVisible7 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.visitOrder'))
      this.tableItemShow.isVisible8 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.paidNumbers'))
      this.tableItemShow.isVisible9 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.paymentAmount'))
      this.tableItemShow.isVisible10 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.vToP'))
      this.tableItemShow.isVisible11 = this.judgeStrArrIncludeOtherString(this.$i18n.t('dataAnalysis.customerUnitPrice'))
    },
    judgeStrArrIncludeOtherString (str) {
      var strArr = this.sumData
      return strArr.includes(str)
    }
  },
  watch: {
    startTime (val) {
      this.getFlowSour()
    },
    timeType (val) {
      this.getFlowSour()
    },
    // 第三部分的最多项多选款监听
    'form.saleIndex' () {
      this.selectNum = this.form.saleIndex.length + this.form.serviceIndex.length
      // sumData是用来存放点击选中的文本框信息
      this.sumData = []
      this.sumData = this.sumData.concat(this.form.saleIndex).concat(this.form.serviceIndex)
      var checks = document.getElementsByName('saleIndex')
      var span = document.getElementById('maxSelectSpan')
      checks.forEach(i => {
        if (this.selectNum >= 5) {
          this.textShare(span, 'red')
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
      })
      if (this.selectNum < 5) {
        this.textShare(span, 'grey')
        checks.forEach(i => {
          i.removeAttribute('disabled')
        })
      }
    },
    'form.serviceIndex' () {
      this.selectNum = this.form.saleIndex.length + this.form.serviceIndex.length
      // debugger
      this.sumData = []
      this.sumData = this.sumData.concat(this.form.saleIndex).concat(this.form.serviceIndex)
      var checks = document.getElementsByName('saleIndex')
      var span = document.getElementById('maxSelectSpan')
      checks.forEach(i => {
        if (this.selectNum >= 5) {
          this.textShare(span, 'red')
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
      })
      if (this.selectNum < 5) {
        this.textShare(span, 'grey')
        checks.forEach(i => {
          i.removeAttribute('disabled')
        })
      }
    },
    // 将存放的选择框数据调用函数来执行数据响应展示操作
    'sumData' () {
      this.changVisibles()
    }
  }
}
</script>

<style lang="scss">
.source {
  /* 多项选择 */
  .checkbox {
    background-color: #fff;
  }

  .checkbox-group {
    display: flex;
    align-items: flex-start;
  }

  .checkbox-group .checkbox-group__title {
    font-size: 14px;
  }

  .checkbox-group .checkbox-group__content {
    flex: 1;
  }

  .checkbox-group__content .checkbox-item {
    display: inline-block;
    width: 160px;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 16px;
  }

  .limit-num {
    line-height: 20px;
    font-size: 14px;
    color: #969799;
    margin-left: 70px;
  }

  .limit-num .item-num {
    color: #155bd4;
  }

  .limit-num .out-limit {
    animation: shake 0.2s 1;
  }

  @keyframes shake {
    0%,
    100% {
      -webkit-transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translateX(-5px);
    }
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translateX(5px);
    }
  }
  /* /多项选择 */

  /* 平台选择 */
  .plat {
    margin-bottom: 16px;
  }

  /* /平台选择 */

  /* 告示 */
  .notice {
    margin-bottom: 16px;
  }

  .notice p {
    margin-bottom: 8px;
  }

  /* /告示 */

  /* 表格 */
  // .table .table-item{
  // 	display: flex;
  // 	align-items: center;
  // }
  /* /表格 */
}
</style>

